<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content=""/>
    <style type="text/css">
        #box{
            width: 730px;
            height: 454px;
            margin: 0 auto;
            border: 1px solid orange;
            position: relative;
        }
        #box img{
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        #box .num{
			position: absolute;
			top: 400px;
			left: 265px;
        }
        #box .num .num1{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			float: left;
			background-color: #000;
			color: #FFF;
			text-align: center;
			margin-left: 5px;
		}
        #left{
			width: 80px;
			height: 100px;
			background-color: orange;
			cursor: pointer;
			position: absolute;
			left: 0;
			top: 150px;
			display: none;
        }
        #right{
			width: 80px;
			height: 100px;
			background-color: orange;
			cursor: pointer;
			position: absolute;
			right: 0;
			top: 150px;
			display: none;
        }
		#gaizi{
			width: 730px;
            height: 454px;
            position: absolute;
            left: 0;
            top: 0;
		}
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var timer;
            var i=0;
            var pic = document.getElementsByTagName('img');
            var num = document.getElementsByClassName('num1')
            var left = document.getElementById('left');
            var right = document.getElementById('right');
            var gaizi = document.getElementById('gaizi');
            pic[i].style.display = "block";
            num[i].style.backgroundColor = "red";
            timer = setInterval(lunbo,1000);
            gaizi.onmouseover = function(){
            	clearInterval(timer);
            	left.style.display = "block";
            	right.style.display= "block"
            }
            gaizi.onmouseout = function(){
            	timer = setInterval(lunbo,1000);
            	left.style.display = "none";
            	right.style.display= "none"
            }
           	function lunbo(){
            	num[i].style.backgroundColor = "#000";
                pic[i].style.display = "none";
                if(i==5)i=-1;
                pic[i+1].style.display = "block";
                num[i+1].style.backgroundColor = "red";
                i++;
            }
            left.onclick = function(){
            	pic[i].style.display = "none";
            	num[i].style.backgroundColor = "#000";
            	i--;
            	if(i==-1)i=5;
            	pic[i].style.display = "block";
            	num[i].style.backgroundColor = "red";
            }
            left.onmouseover = function(){
            	clearInterval(timer);
            }
            left.onmouseout = function(){
            	timer = setInterval(lunbo,1000);
            }
            right.onclick = function(){
            	pic[i].style.display = "none";
            	num[i].style.backgroundColor = "#000";
            	i++;
            	if(i==5)i=-1;
            	pic[i].style.display = "block";
            	num[i].style.backgroundColor = "red";
            }
            right.onmouseover = function(){
            	clearInterval(timer);
            }
            right.onmouseout = function(){
            	timer = setInterval(lunbo,1000);
            }

        }
    </script>
    <title>轮播</title>
  </head>

 <body>
	<div id="box">
		<img src="images/1.jpg" alt="" />
		<img src="images/2.jpg" alt="" />
		<img src="images/3.jpg" alt="" />
		<img src="images/4.jpg" alt="" />
		<img src="images/5.jpg" alt="" />
		<img src="images/6.jpg" alt="" />
		<div class="num">
			<div class="num1">1</div>
			<div class="num1">2</div>
			<div class="num1">3</div>
			<div class="num1">4</div>
			<div class="num1">5</div>
			<div class="num1">6</div>
		</div>
		<div id="left"></div>
		<div id="right"></div>
		<div id="gaizi"></div>
	</div>
 </body>
</html>